<template>
    <div>
        <div class="container">
            <div class="demo">
                <wxc-minibar title="兑换"
                             background-color="#009ff0"
                             text-color="#FFFFFF"
                             @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                             @wxcMinibarRightButtonClicked="minibarRightButtonClick"></wxc-minibar>
            </div>
        </div>
        <div class="head-body">
            <div class="head-txt">
                <text style="color:red">可兑换巴币: 41341</text>
            </div>
            <div class="head-txt-mount">
              <text style="color:blue;font-size: 40px;top: 20px;left:20px;position: absolute;">兑换巴币:</text>
              <input class="input" type="text" placeholder="兑换的巴币数量">
            </div>
            <div class="head-txt">
                <text style="color:red">兑换到微信号：xiongda1234</text>
            </div>
            <div class="head-txt">
                <div class="input-wrapper">
                    <div class="input-login">
                        <text class="input-login-text">确定</text>
                    </div>
                </div>
            </div>
            <div class="input-wrapper-new">
            <div class="input-login-new">
                <text class="input-login-text-new">点击下列兑换方式</text>
            </div>
           </div>
        </div>
        <div class="payway">
            <div class="txt" @click="xianshi"><text>微信</text></div>
            <div class="txt" @click="zhifu"><text>支付宝</text></div>
            <div class="txt" @click="card" style="border-bottom-width:1px"><text>银行卡</text></div>
        </div>
        <scroller style="width:750px;min-height:500px;border-top-width: 2px;border-color: #79ffe0">
            <div><text style="color:red;">兑换记录</text></div>
            <div class="wrapper">
                <scroller class="scroller">
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 失败    失败理由</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 失败    失败理由</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 失败    失败理由</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 失败    失败理由</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 失败    失败理由</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 失败    失败理由</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 失败    失败理由</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 失败    失败理由</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 失败    失败理由</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                    <text class="jilu">2018-1-10 10:24:01 兑换30029 成功</text>
                </scroller>
            </div>
        </scroller>
        <div class="alret-model" v-if="weixin">
            <text class="alret-text-x">
                <text>请输入微信号：</text>
                <input style="border-color:rgb(255, 80, 0);border-width:2px;
                border-radius: 5px;
                width:400px;height:60px" type="text" />
            </text>
            <text class="alret-text-t">
                <wxc-button class="btn" text="确定"
                            type="normal"
                            @wxcButtonClicked=""></wxc-button>
                <wxc-button class="btn" text="取消"
                            type="red"
                            @wxcButtonClicked=" concel(e)"></wxc-button>
            </text>
        </div>
        <div class="alret-model" v-if="zhifubao">
            <text class="alret-text-x">
                <text>请输入支付宝账号：</text>
                <input style="border-color:rgb(255, 80, 0);border-width:2px;
                border-radius: 5px;
                width:400px;height:60px" type="text" />
            </text>
            <text class="alret-text-t">
                <wxc-button class="btn" text="确定"
                            type="normal"
                            @wxcButtonClicked=""></wxc-button>
                <wxc-button class="btn" text="取消"
                            type="red"
                            @wxcButtonClicked=" concel(e)"></wxc-button>
            </text>
        </div>
        <div class="alret-model-card" v-if="cad">
            <text class="alret-text-x" style="margin-top:20px;height:120px;margin-left:70px">
                <text>请输入银行卡的号：</text>
                <input style="border-color:rgb(255, 80, 0);border-width:2px;
                border-radius: 5px;
                width:400px;height:60px" type="text" />
            </text>
            <text class="alret-text-x" style="margin-top:20px;height:120px;margin-left:70px">
                <text>持卡人：</text>
                <input style="border-color:rgb(255, 80, 0);border-width:2px;
                border-radius: 5px;
                width:400px;height:60px" type="text" />
            </text>
            <text class="alret-text-x" style="margin-top: 20px;height:120px;margin-left:70px">
                <text>银行：</text>
                <input style="border-color:rgb(255, 80, 0);border-width:2px;
                border-radius: 5px;
                width:400px;height:60px" type="text" />
            </text>
            <text class="alret-text-t" style="margin-top: 20px;height:100px;margin-left:70px">
                <wxc-button class="btn" text="确定"
                            type="normal"
                            @wxcButtonClicked=""></wxc-button>
                <wxc-button class="btn" text="取消"
                            type="red"
                            @wxcButtonClicked=" concel(e)"></wxc-button>
            </text>
        </div>
    </div>
</template>

<script>
    import { WxcMinibar } from 'weex-ui';
    import { WxcButton } from 'weex-ui';
    import { WxcRadio } from 'weex-ui'
    const modal = weex.requireModule('modal');
    const dom = weex.requireModule('dom')
    export default {
        components: { WxcMinibar,WxcButton,WxcRadio },
        data: () => ({
            list: [
                { title: '微信', value: 2,index:2,},
                { title: '支付宝', value: 3,index:3 },
                { title: '银行卡', value: 4,index:4 },
            ],
            checkedInfo: {title: '', value:''},
            weixin:false,
            zhifubao:false,
            cad:false,
        }),
        methods: {
            minibarLeftButtonClick () {
            },
            minibarRightButtonClick () {
                modal.toast({ 'message': 'click rightButton!', 'duration': 1 });
            },
            wxcRadioListChecked (e) {
                this.checkedInfo = e;
            },
            xianshi(value){
                    this.weixin=true;
            },
            zhifu(e){
                  this.zhifubao=true;
            },
            card(e){
                  this.cad=true
            },
            concel(e){
                   this.weixin=false;
                   this.zhifubao=false;
                   this.cad=false;
            },
            tab(index) {
                this.num = index;
            }
        }
    };
</script>
<style scoped>
    .head-body{
        width: 750px;
        height:400px;
        border-width: 1px;
        border-color: rgba(127, 255, 176, 0.91);
        background-color: #8fe7ff;
    }
    .head-txt{
        width: 500px;
        height: 100px;
        margin-left: 125px;
        display: flex;
        justify-content:center;
        align-items:center;
    }
    .head-txt-mount{
        width: 500px;
        height: 100px;
        /*border-color: brown;*/
        /*border-width: 1px;*/
        margin-left: 125px;
        display: flex;
        justify-content:center;
        align-items:center;
    }
    .input{
        width: 300px;
        height: 60px;
        display: flex;
        justify-content:center;
        align-items:center;
        top:0px;
        left:100px;
        border-color: #00B4FF;
        border-width: 2px;
    }
    .input-login{
        height: 75px;
        width: 120px;
        background-color: #48c9bf;
        border-radius: 10px;
        /*margin-top:-160px;*/
    }
    .input-login-new{
        height: 75px;
        width: 320px;
        background-color: #48c9bf;
        border-radius: 10px;
        /*margin-top:-160px;*/
    }
    .input-login-text{
        height: 75px;
        width: 120px;
        text-align: center;
        line-height: 80px;
        color: white;
        font-size: 38px;
    }
    .input-login-text-new{
        height: 75px;
        width: 320px;
        text-align: center;
        line-height: 80px;
        color: white;
        font-size: 38px;
    }
    .input-wrapper{
        width: 120px;
        /*margin-left: 448px;*/
        margin-left: -330px;
        top:0px;
        /*margin-right: 100px;*/
        /*margin-bottom: 30px;*/
    }
    .input-wrapper-new{
        width: 320px;
        left: 300px;
        top:-85px;
        border-radius: 10px;
    }
    .scroller {
        width:750px;
        min-height:500px;
        border-width: 2px;
        border-style: solid;
        border-color: #79ffe0;
        margin-left:0px;
    }
    .jilu{
        width:750px;
        min-height: 40px;
        border-color: #5fffe1;
        border-bottom-width: 1px;
        display: flex;
        flex-wrap:wrap;
    }
    .payway{
        width: 750px;
        height:300px;
        display: -webkit-flex;
        display: flex;
        flex-direction:column;
        /*background-color: #00B4FF;*/
        justify-content:center;
        justify-items: center;
    }
    .txt{
        width: 750px;
        height:100px;
        background-color:rgb(143, 231, 255);
        display: -webkit-flex;
        display: flex;
        justify-content:center;
        align-items:center;
        border-color:#ffffff;
        border-top-width:2px;
    }
    .alret-model{
        width:500px;
        height:500px;
        border-color:rgb(255, 80, 0);
        border-width: 2px;
        position: absolute;
        top:350px;
        left:125px;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        z-index: 9999;
        background-color:#FFDEAF;
    }
    .alret-model-card{
        width:650px;
        height:600px;
        border-color:rgb(255, 80, 0);
        border-width: 2px;
        position: absolute;
        top:350px;
        left:50px;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        z-index: 9999;
        background-color:#FFDEAF;
    }
    .alret-text{
        width: 450px;
        height:100px;
        left:25px;
        justify-content: center;
        align-items: center;
        display: flex;
        display: -webkit-flex;
    }
    .alret-text-x{
        width: 450px;
        height:110px;
        left:46px;
        justify-content:left;
        flex-direction: column;
        display: flex;
        display: -webkit-flex;
        margin-top: 100px;
    }
    .alret-text-t{
        width: 450px;
        height:110px;
        left:25px;
        justify-content:center;
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        align-items: center;
        margin-top: 50px;
    }
    .btn{
        width: 200px;
        height: 100px;
        border-radius: 10px;
        margin-left: 20px;
    }
    .scroller-x {
        width:750px;
        height: 330px;
        border-width: 2px;
        border-style: solid;
        border-color:#f6f6f6;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: left;
        align-items: center;
    }
</style>